﻿.track-visual {
    min-width: 100vw;
    box-sizing: border-box;
    
    background: transparent;

    padding-right: ~"calc(100vw - 160px)";

    @media(min-width:768px)
    {
        padding-right: ~"calc(100vw - 240px)";
    }

    @media(min-width:992px)
    {
        padding-right: ~"calc(100vw - 280px)";
    }

    .clips {
        height: 100%;
    }
    
    ctl-clip {
        position: absolute;
        display: block;
        height: 100%;
    }

    &.focused { 
       > .inner-border {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border-width: 2px 2px;
            border-style: solid;
        }
    }
    
    .drag-clip-shadow {
        position: absolute;
        background: rgba(255,255,255,0.2);
        height: 100%;
        &.forbidden {
            background: rgba(255,100,100,0.2);
        }
    }

    .drag-clip-outline {
        position: absolute;
        border: 1px solid rgb(255,255,255);
        height: 100%;
        box-shadow: #fff 0 0 20px inset;
        pointer-events: none;
        
        &.forbidden {
            border-color: red;
            box-shadow: #f77 0 0 20px inset;
        }
    }
}

track-visual {
    display: block;
    width: 100%;
}